<script setup>

  import {useRouter} from "vue-router";
  import {reactive, ref} from "vue";
  import {ElMessage} from "element-plus";
  import xx from "@/axios/xx";

  const info = reactive({
    user: {},
    form: {
      password: '',
      passwordNew: '',
      passwordConfirmNew: '',
      userId: ''
    },
    dialogVisible: false
  })
  info.user=JSON.parse(sessionStorage.getItem(('user')))
  //获取vue路由
  const router = useRouter();
  //检查是否登录
 /* if(info.user==null){
    router.push('/login')
    ElMessage.error(`请先登录再进行操作`)
  }*/
  const logout = () => {
    //退出之前先清理掉保存的用户信息
    //sessionStorage.clear();
    router.push('/login')
  }


  const updatePassword = () => {
    info.dialogVisible = true
  }

  const submitNewPassword = () => {

    if(info.form.passwordNew === '' || info.form.passwordConfirmNew === ''){
      ElMessage.error("新密码不能为空")
      return;
    }
    //验证两次是否一致
    if(info.form.passwordNew !== info.form.passwordConfirmNew){
      ElMessage.error("两次密码不一致请重新填写")
      return;
    }
    //指定修改用户的ID
    info.form.userId = info.user.userId
    //发送信息
    xx.put('/userInfo/updatePassword',info.form).then(res =>{
      if(res.code === 200){
        ElMessage({
          message: res.message,
          type: 'success',
        })
        router.push('/login')
      }else {
        ElMessage.error(res.message)
      }
    })
  }


</script>

<template>
  <div class="common-layout">
    <el-container class="containers">
      <el-header class="headers" >
        <div class="title">
          中小型金融贷款管理平台
        </div>
        <div style="flex: 1"></div>
        <div class="welcome">
          <el-avatar :size="50" :src="info.user.avatar" />
          <el-dropdown>
            <span class="el-dropdown-link">
              欢迎：<span v-if="info.user!=null">{{info.user.fullName}}</span>
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click="updatePassword">修改密码</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px"  class="aside">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              router
          >
            <el-menu-item index="/layout/welcome">
              <el-icon><HomeFilled /></el-icon>
              <span>首页信息</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Money /></el-icon>
                <span>贷款产品管理</span>
              </template>
              <el-menu-item index="/layout/loanProduct">产品信息</el-menu-item>
              <el-menu-item index="/layout/productType">分类信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><OfficeBuilding /></el-icon>
                <span>银行信息管理</span>
              </template>
              <el-menu-item index="/layout/bankInfo">银行信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>用户信息管理</span>
              </template>
              <el-menu-item index="/layout/userInfo">用户信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="4-1">系统信息</el-menu-item>
              <el-menu-item index="/layout/echartsx">图表信息</el-menu-item>

            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main >
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>



  <!-- 修改密码-->
  <el-dialog
      v-model="info.dialogVisible"
      title="修改密码"
      width="30%"
      :before-close="handleClose"
  >

    <el-form :model="info.form" label-width="auto" style="max-width: 600px">
      <el-form-item label="原始密码">
        <el-input v-model="info.form.password" />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input
            v-model="info.form.passwordNew"
            style="width: 600px"
            type="password"
            placeholder=""
            show-password
        />
      </el-form-item>

      <el-form-item label="确认新密码">
        <el-input
            v-model="info.form.passwordConfirmNew"
            style="width: 600px"
            type="password"
            placeholder=""
            show-password
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitNewPassword">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>
.containers{
  height: 100vh;
}
.headers{
  height: 80px;
  background-color: rgb(1, 34, 67);
  display: flex;
}
.title{
  display: flex;
  width: 600px;
  font-size: 35px;
  color: white;
  align-items: center;
}
.welcome{
  display: flex;
  width: 400px;
  color: white;
  align-items: center;
  justify-content: right;
  margin-right: 30px;
}
.el-dropdown{
  color: white;
  cursor: pointer;
}
.aside{
  width: 220px;
  border-right: 1px solid #ccc;
}
</style>